<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mos</title>
    <link rel="stylesheet" href="https://weui.io/style/weui.css">
    <script src="https://minglie.gitee.io/mingpage/static/public/vue/3.2/vue.global.prod.min.js"></script>
</head>

<body>
<div  v-cloak id="main" >
    <div class="container">
        <div class="weui-tab">
            <div class="weui-tab__panel">
                <div class="weui-cells">
                    <button  :class="{btnDown:btnKeyVal[0]}" @mouseleave="up(0)" @mousedown="down(0)" @mouseup="up(0)">加</button>
                </div>
                <div class="weui-cells">
                    <button  :class="{btnDown:btnKeyVal[1]}" @mouseleave="up(1)" @mousedown="down(1)" @mouseup="up(1)">减</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>


</html>

<script type="module" >

    const vueConstructorData={
        async mounted() {
            let that=this;
            this.manKeyWork = new Worker('ManKeyWork.js');
            this.manKeyWork.onmessage = e => {
                that.onModmanEvent(e.data);
            }
        },
        data() {
            return {
                btnKeyVal:[0,0]
            }
        },

        methods:{
            async down(keyId){
               this.btnKeyVal[keyId]=true;
                this.manKeyWork.postMessage({
                    m:"down",
                    p:keyId
                });
            },
            async up(keyId){
                this.btnKeyVal[keyId]=false;
                this.manKeyWork.postMessage({
                    m:"up",
                    p:keyId
                });
            },
            async onModmanEvent({keyId,keyEvent}){
                console.log(keyId,keyEvent)
            },
            quit(){

            },

        }
    }
    const {createApp}=Vue;
    const vueApp= createApp(vueConstructorData);
    vueApp.mount('#main');
</script>



<style>
    *{
        margin: 0;
        padding: 0;
    }

    [v-cloak]{
        display: none;
    }

    li{
        list-style:none;
    }

    .badge {
        position: relative;
        margin-right: 10px;
    }
    .badge img{
        width: 50px;
        display: block;
    }
    .badge span {
        position: absolute;
        top: -0.4em;
        right: -0.4em;
    }
    .profile_photo {
        position: relative;
        margin-right: 10px;
    }
    .profile_photo img {
        width: 50px;
        display: block;
    }

    button{
        width: 10vw;
        height: 5vw;
    }

    .btnDown{
        background-color: red;
    }

    .disv{
        font-size: 5vw;
    }
</style>






